<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<c:set var="language" value="${language}" />
<c:if test="${language == null}">
<c:set var="language" value="en"/>
</c:if>
<fmt:setLocale value="${language}" />
<fmt:setBundle basename="ict.kth.se.text" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="${language}">
    <head>
        <!-- Meta information --> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Author" content="Group 12"/>
        
        <!-- Title --> 
        <title>Grönalund</title>
        
        <!-- Scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src=<c:url value="/resources/scripts/date.js"/>> </script>
        <script type="text/javascript" src=<c:url value="/resources/scripts/gen_validatorv4.js"/>> </script>        

        <!-- Stylesheets --> 
        <link rel="stylesheet" href=<c:url value="/resources/css/style.css"/> />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>        
    </head>
    
	<body>
    	<div id="header">
	    	<div id=header_left>
	    		<h1><label for="homeHeader"><fmt:message key="home.label.homeHeader" /></h1>
	    	</div>
	    	<div id=header_right>
		    	  		    		
	    	</div>
		</div>
    	<div id="wrapper">        
        	<div class="tabs">
  			<!-- tabs -->
            	<ul id="menu" class="tabNavigation">
		    		<li><a href="<c:url value="/?language=${language}"/>" title="Seeker" class="active"><label for="jobSeek"><fmt:message key="home.label.jobSeek" /></a></li>
                    <li><a href="<c:url value="/admin?language=${language}"/>" title="Login"><label for="recLogin"><fmt:message key="home.label.recLogin" /></a></li>
                    <security:authorize ifAnyGranted="ROLE_ADMIN,ROLE_RECRUITER">
                    	<li><a href="<c:url value="/j_spring_security_logout?language=${language}"/>" title="Logout"><label for="logOut"><fmt:message key="home.label.logOut" /></a></li>
                    </security:authorize>
				</ul>                             
                <div id="content_container">
                      <div id="peer">
                            <div id="peer_wrapper">
                            <div class="spacer"> </div>
                            	<h1> <label for="seekerFormH1"><fmt:message key="home.label.seekerFormH1" /> </h1>
                            	<h2><label for="persInf"><fmt:message key="home.label.persInf" /></h2>
                                <form name="seeker_form" action="insertNewSeeker"  method="post">
                                <label for="firstName"><fmt:message key="home.label.firstName" />: <br/><input type="text" name="firstName" class="inputtext" value="${person.firstName}" /><br/>
                                <label for="lastName"><fmt:message key="home.label.lastName" />: <br/><input type="text" name="lastName" class="inputtext" value="${person.lastName}" /> <br/>
                                <label for="email"><fmt:message key="home.label.email" />:<br/><input type="text" name="email"  class="inputtext" value="${person.email}"/> <br/>        
                                <label for="ssn"><fmt:message key="home.label.ssn" />: (YYMMDD-XXXX)<br/><input type="text" name="ssn"  class="inputtext" value=""/> <br/>                                                       
							   	
							   	<input type="text" id="allCompetencesInput" name="allCompetencesInput" value="" hidden="true" />
							    <input type="text" id="allAvailabillitiesInput"  name="allAvailabillitiesInput" value="" hidden="true"  />
							   	</form>
							   	<!-- Validation -->
		                           <script  type="text/javascript">
											 var frmvalidator = new Validator("seeker_form");
											 frmvalidator.addValidation("firstName","req","Please enter your First Name");
											 frmvalidator.addValidation("lastName","req","Please enter your Last Name");
											 frmvalidator.addValidation("email","maxlen=50");
											 frmvalidator.addValidation("email","req","Please enter your email");
											 frmvalidator.addValidation("email","email", "Please enter a valid email");
											 frmvalidator.addValidation("ssn","regexp=^[0-9]{6}-[0-9pPtTfF][0-9]{3}$", "Please enter a valid social security number");	
											 frmvalidator.addValidation("ssn","req", "Please enter a valid social security number");											 
											 frmvalidator.addValidation("allAvailabillitiesInput","minlen=5", "Please enter a period when you can work");	

								   </script>  
							   	<form>
							   	<h2><label for="choseComp"><fmt:message key="home.label.choseComp" /></h2>
							   	<p class="checkboxes">
							   		<c:forEach items="${allCompetences}" var="competence">
							   			<c:set var="competenceName" value="${competence.nameEn}"/>
							   			<c:if test="${language == 'se'}">
											<c:set var="competenceName" value="${competence.nameSe}"/>
										</c:if>
							   			<label><input id="${competence.id}" type="checkbox" class="hest" name="items" onclick="clickOnCompetence(${competence.id});" numOfYears="0" value="${competenceName}">${competenceName}</input> </label><br>
							   								   			
							   		</c:forEach>
							    </p>			
							    <h2><label for="yourComp"><fmt:message key="home.label.yourComp" /></h2>
							    <div id="competencies">
								    <ol>
								    </ol>						    
							    </div>
							    							   	
							    <h2><label for="availability"><fmt:message key="home.label.availability" /></h2>
							    <label for="from"><fmt:message key="home.label.from" />: <br/>
							    
							    <select name="FirstSelectDay" class="selectDay1">
									<option>1 </option>
									<option>2 </option>
									<option>3 </option>
									<option>4 </option>
									<option>5 </option>
									<option>6 </option>
									<option>7 </option>
									<option>8 </option>
									<option>9 </option>
									<option>10</option>
									<option>11</option>
									<option>12</option>
									<option>13</option>
									<option>14</option>
									<option>15</option>
									<option>16</option>
									<option>17</option>
									<option>18</option>
									<option>19</option>
									<option>20</option>
									<option>21</option>
									<option>22</option>
									<option>23</option>
									<option>24</option>
									<option>25</option>
									<option>26</option>
									<option>27</option>
									<option>28</option>
									<option>29</option>
									<option>30</option>
									<option>31</option>
								</select>
								<select name="FirstSelectMonth" class="selectMonth1">
									<option>Jan</option>
									<option>Feb</option>
									<option>Mar</option>
									<option>Apr</option>
									<option>May</option>
									<option>Jun</option>
									<option>Jul</option>
									<option>Aug</option>
									<option>Sep</option>
									<option>Oct</option>
									<option>Nov</option>
									<option>Dec</option>
								</select>
								<select name="FirstSelectYear" class="selectYear1">
									<script language="JavaScript">
										document.write(WriteYearOptions(50));
									</script>
								</select>
								<br/>
								
								<label for="to"><fmt:message key="home.label.to" />:<br/>
								<select name="FirstSelectDay2" class="selectDay2">
									<option>1 </option>
									<option>2 </option>
									<option>3 </option>
									<option>4 </option>
									<option>5 </option>
									<option>6 </option>
									<option>7 </option>
									<option>8 </option>
									<option>9 </option>
									<option>10</option>
									<option>11</option>
									<option>12</option>
									<option>13</option>
									<option>14</option>
									<option>15</option>
									<option>16</option>
									<option>17</option>
									<option>18</option>
									<option>19</option>
									<option>20</option>
									<option>21</option>
									<option>22</option>
									<option>23</option>
									<option>24</option>
									<option>25</option>
									<option>26</option>
									<option>27</option>
									<option>28</option>
									<option>29</option>
									<option>30</option>
									<option>31</option>
								</select>
								<select name="FirstSelectMonth2" class="selectMonth2">
									<option>Jan</option>
									<option>Feb</option>
									<option>Mar</option>
									<option>Apr</option>
									<option>May</option>
									<option>Jun</option>
									<option>Jul</option>
									<option>Aug</option>
									<option>Sep</option>
									<option>Oct</option>
									<option>Nov</option>
									<option>Dec</option>
								</select>
								<select name="FirstSelectYear2" class="selectYear2">
									<script language="JavaScript">
										document.write(WriteYearOptions(50));
									</script>
								</select>
								<br/>
								<fmt:message key="home.button.add" var="addButtonValue" />
								<input type="button" name="add" value="${addButtonValue}" class="button2" onclick="addAvailabillitiy()"/>
								<div class="spacer"> </div>
								<h2><label for="yourAvb"><fmt:message key="home.label.yourAvb" /></h2>
								<div id="availabilities">
								    <ol>
								    </ol>						    
							    </div>													
								<br/>	
								<fmt:message key="home.button.sendApplication" var="buttonValue" />
                            	<a href='javascript:submit()' class="send_link">${buttonValue}</a>											
                           </form>
                           
						   <script>	
									function submit(){
								   		if(document.seeker_form.onsubmit()){
								      	document.seeker_form.submit();
								  		}
								    }
								
									function clickOnCompetence(id){
										if($("#"+id).attr("checked")){
											
							   				var exp = prompt("Years of experience","");
							   				if (exp != null && exp != "" && !isNaN(exp)){
							   					$("#"+id).attr("numOfYears", exp);
							   				}
							   				else{
							   					alert("Must be a number");
							   					$("#"+id).attr("checked", false);							   					
							   				}
						   				}
										controllAllCompetences();
									}							    
							    
								   	function controllAllCompetences(){								   		
								   				$("#competencies ol").empty();
								   				$(".hest").each(function(){
								   					if($(this).attr("checked")){
										   				$("#competencies ol").append('<li>' + $(this).val() + ' | ' + $(this).attr("numOfYears") + ' år' + '</li>');
									   				}
								   				});
								   				packAllCompetences();
								   	}	
								   	function packAllCompetences(){	 		
						   				var allCompetences = "";
						   				$(".hest").each(function(){
						   					if($(this).attr("checked")){
								   				allCompetences += $(this).attr("id") + ":" + $(this).attr("numOfYears") + ";";
							   				}
						   				});
						   				$("#allCompetencesInput").val(allCompetences);
						   			}	
								   	function addAvailabillitiy(){
								   		var day1 = $('select.selectDay1 option:selected').val(); 
								   		var month1 = $('select.selectMonth1 option:selected').val(); 
								   		var month1Formated = $('select.selectMonth1 option:selected').index();
								   		var year1 = $('select.selectYear1 option:selected').val(); 
								   		var day2 = $('select.selectDay2 option:selected').val(); 
								   		var month2 = $('select.selectMonth2 option:selected').val();
								   		var month2Formated = $('select.selectMonth2 option:selected').index();
								   		var year2 = $('select.selectYear2 option:selected').val(); 
								   		var availabillity ="";
								   		var availabillityFormated ="";

								   		if(control(year1, month1Formated,day1,year2, month2Formated, day2)){
								   			availabillity = year1 + '-' + month1 + '-' + day1 + ' : ' + year2 + '-' + month2 + '-' + day2;
								   			availabillityFormated += year1 + '-' + month1Formated + '-' + day1 + ':' + year2 + '-' + month2Formated + '-' + day2 + ';';
								   			$("#availabilities ol").append('<li>' + availabillity +'</li>');
								   			$("#allAvailabillitiesInput").val(availabillityFormated);
								   		}
								   		else{
								   			alert("The first date is after the second date!");
								   		}
								   
								   	}	
								   	function control(year1, month1Formated,day1,year2, month2Formated, day2){
								   		var bool = new Boolean();
								   		bool = true;
								   		var start=new Date();
								   		start.setFullYear(year1, month1Formated,day1);
								   		var end=new Date();
								   		end.setFullYear(year2, month2Formated, day2);
								   		if (start.getTime() > end.getTime()) {
								   		    bool = false;
								   		}
								   		return bool;
								   	}
							</script>
                       </div>                
                   	</div>
                </div>
            </div>                  
    	</div>   
    </body>
</html>